<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>附近的人</title>
    <link rel="stylesheet" href="${base}/layui/css/layui.css">
<!--     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=co1mC9vcPKDEMyqI0UQV2eqvrAQ8mcv1"></script> -->
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=co1mC9vcPKDEMyqI0UQV2eqvrAQ8mcv1&services=&t=20190622163250"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
	<script type="text/javascript" src="http://lbsyun.baidu.com/jsdemo/data/points-sample-data.js"></script>
	<script src="${base}/js/jquery-2.1.4.min.js" type="text/javascript"></script>
	<script src="${base}/layui/layui.all.js"></script>
	<style>
	#opt{ position: absolute;right:5px;width: 150px;text-align: center;}
	.hide{display: none;}
	</style>
</head>
<body>	
<div class="layui-form hide" id="time" style="padding-top:20px;padding-right:20px;">
  <div class="layui-form-item">
    <label class="layui-form-label">坐标</label>
    <div class="layui-input-block">
       <input placeholder="GPS坐标,经纬度" name="gps" id="gps" class="layui-input" value="${lat?default('31.310428')},${lng?default('120.607507')}" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">距离(公里)</label>
    <div class="layui-input-block">
       <input placeholder="距离" name="distance" id="distance" class="layui-input" value="10" >
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">人数</label>
    <div class="layui-input-block">
       <input placeholder="人数" name="limit" id="limit" class="layui-input" value="5" >
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">省份</label>
    <div class="layui-input-block">
      <select name="area_id" id="area_id" >
      	<#list area_list as one>
        <option value="${one.code}">${one.name}</option>
        </#list>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
       <select name="sex" id="sex" class="layui-select">
			<option value="1">男</option>
            <option value="2">女</option>
        </select>
    </div>
  </div>
   
</div>

<div class="layui-form hide" id="online" style="padding-top:20px;padding-right:20px;">
  <div class="layui-form-item">
    <label class="layui-form-label">省份</label>
    <div class="layui-input-block">
      <select name="area_id_o" id="area_id_o" >
       <option value="">不限</option>
      	<#list area_list as one>
        <option value="${one.code}">${one.name}</option>
        </#list>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
       <select name="sex_o" id="sex_o" class="layui-select">
       		<option value="">不限</option>
			<option value="1">男</option>
            <option value="2">女</option>
        </select>
    </div>
  </div>
   
</div>

<div id="opt">
	<a onclick="move();" title="移动GPS" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-top: 10px;">移动第三方</a>
	<a onclick="online('');" title="随机上线1000人" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-top: 20px;">随机上线1000</a>
	<a onclick="online(2);" title="随机上线1000人" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-top: 5px;">随机上线B类1000</a>
	<a onclick="online(3);" title="随机上线1000人" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-top: 5px;">随机上线C类1000</a>
	<a onclick="online(4);" title="随机上线1000人" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-top: 5px;">随机上线D类1000</a>
	<a class="layui-btn  layui-btn-sm" style="margin-top: 40px;">
		7天内 /后 :${day7before?default('0')}/${day7after?default('0')}
	</a>
	<a class="layui-btn  layui-btn-sm" style="margin-top: 40px;">
		新第三方 :${newperson?default('0')}
	</a>
	<a class="layui-btn  layui-btn-sm" style="margin-top: 40px;">
		关注数量 :${fans_cnt?default('0')}
	</a>
	<a onclick="cancel_fans();" class="layui-btn  layui-btn-normal layui-btn-sm" style="margin-top: 40px;">
		取消关注
	</a>
</div>
<div id="baidu_map"  style="width: 1200px;height: 800px;overflow:visible;" >
    
</div>      
</body>
<script type="text/javascript">
$("#area_id").val('${area_id?default('')}');
function online(is_true){
	layui.use('form', function() {
	    var form = layui.form;
	    form.render('select');
	});
	layer.open({
	    type: 1 ,
	    title: '移动参数', 
	    area: ['400px', '300px'],   //宽高
	    shade: 0.6,   //遮罩透明度
	    content: $("#online"),
	    btn: ['确定'], //按钮组
	    scrollbar: false ,//屏蔽浏览器滚动条
	    yes: function(index){
	    	var area_id = $("#area_id_o").val();
	    	var sex = $("#sex_o").val();
	    	if (gps) {
	    		$.post("${base}/users_list/online_rand",
		    	   		{"area_id":area_id,"sex":sex,"is_true":is_true},function(data){ 
		    	   			layer.alert(data);
		    	   			$("#online").hide();
		    	   		}
		    	 );		
	    	}
	        layer.close(index);
	        $("#online").hide();
	    },
		cancel: function(){
			$("#online").hide();        
	    }
	});
}
function move(){
	layui.use('form', function() {
	    var form = layui.form;
	    form.render('select');
	});
	layer.open({
	    type: 1 ,
	    title: '移动参数', 
	    area: ['400px', '500px'],   //宽高
	    shade: 0.6,   //遮罩透明度
	    content: $("#time"),
	    btn: ['确定'], //按钮组
	    scrollbar: false ,//屏蔽浏览器滚动条
	    yes: function(index){
	    	var gps = $("#gps").val();
	    	var distance = $("#distance").val();
	    	var area_id = $("#area_id").val();
	    	var sex = $("#sex").val();
	    	var limit = $("#limit").val();
	    	if (gps) {
	    		$.post("${base}/users_list/move_gps",
		    	   		{"gps":gps,"distance":distance,"area_id":area_id,"sex":sex,"limit":limit},function(data){ 
		    	   			layer.alert(data);
		    	   			$("#time").hide();
		    	   		}
		    	 );		
	    	}
	        layer.close(index);
	        $("#time").hide();
	    },
		cancel: function(){
			$("#time").hide();        
	    }
	});
}
function click(marker, user_id){
	console.log(user_id);
	alert(user_id);
}
// 创建地图实例 setTimeout(show_map, 3000);
function show_map() {
	   var map = new BMap.Map("baidu_map"); 
       var lng = "${lng?default('120.607507')}";
       var lat = "${lat?default('31.310428')}";
       var point = new BMap.Point(lng, lat); // 创建点坐标
       var marker = new BMap.Marker(point);
       map.addOverlay(marker);// 将标注添加到地图中
       //map.centerAndZoom(point, 16);//设置缩放层级
   	   //map.enableScrollWheelZoom();
       map.centerAndZoom(new BMap.Point(lng, lat), 16);
	   map.enableScrollWheelZoom();
	   
	   var seeMarker = function(e,ee,marker){
		   $.post("${base}/users_list/see",
			   		{"user_id":e,"target_user_id":"${user_id}"},function(data){ 
			   			alert(data);
			   		}
			 );	
	   }
	   var deteilMarker = function(e,ee,marker){
		    window.open("${base}/users_list/detail?user_id=" + e,"_blank");
		}
	   
	   var gpsMarker = function(e,ee,marker){
		layer.confirm('确定要取消吗？', {
			  btn: ['确定'] //按钮
		}, function(){
			 $.post("${base}/users_list/cancel_gps",
			   		{"user_id":e},function(data){ 
			   			alert(data);
			   		}
			 );
		});

		  
		  
	  }
	   var hotMarker = function(e,ee,marker){
		   $.post("${base}/users_list/embrace",
			   		{"user_id":e,"to_user_id":"${user_id}"},function(data){ 
			   			alert(data);
			   		}
			 );	
	   }
	   var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
	        offset: new BMap.Size(10, 25), // 指定定位位置  
	        imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
	    });
	   
	   
	   
	   var myIcon_new = new BMap.Icon("http://qiniu.static.50dufei.top/map_shuijun_new1.png", new BMap.Size(23, 25), { 
		   offset: new BMap.Size(10, 25), // 指定定位位置  
	       imageOffset: new BMap.Size(0, 0)
	   }); 
   	   var markers = [];
   	   <#list list as one>
   	   <#if one.is_true gt 1 >
   		   <#if one.user_mobile?exists>
	   		   <#if one.is_true == 3 >
	   				var marker${one.user_id} = new BMap.Marker(new BMap.Point(${one.lng},${one.lat}),{icon:myIcon_new});
	   		   <#else>
		   		   <#if one.sex == 1>
		   		   	var marker${one.user_id} = new BMap.Marker(new BMap.Point(${one.lng},${one.lat}),{icon:myIcon});
		   		   <#else>
		   	 	   	var marker${one.user_id} = new BMap.Marker(new BMap.Point(${one.lng},${one.lat}));
		   		   </#if>
	   		   </#if>
	   		<#else>
	   		var marker${one.user_id} = new BMap.Marker(new BMap.Point(${one.lng},${one.lat}),{icon:myIcon});
	   		</#if>	   
	   //marker${one.user_id}.setLabel(new BMap.Label(str${one.user_id},{offset:new BMap.Size(20,-10)}));
	   //marker${one.user_id}.addEventListener("click",click(1));
	       var markerMenu${one.user_id} = new BMap.ContextMenu();
	       markerMenu${one.user_id}.addItem(new BMap.MenuItem('查看此人', deteilMarker.bind(marker${one.user_id},${one.user_id})));
	       markerMenu${one.user_id}.addItem(new BMap.MenuItem('关注此人', seeMarker.bind(marker${one.user_id},${one.user_id})));
	       markerMenu${one.user_id}.addItem(new BMap.MenuItem('取消位置', gpsMarker.bind(marker${one.user_id},${one.user_id})));
	       markerMenu${one.user_id}.addItem(new BMap.MenuItem('拥抱1℃', hotMarker.bind(marker${one.user_id},${one.user_id})));
	   	   marker${one.user_id}.addContextMenu(markerMenu${one.user_id});
	  	   markers.push(marker${one.user_id});
	   <#else>
		   var head = '${one.user_header?default("head3.png")}';
		   if (head.indexOf("http") == -1) {
			   head= "http://qiniu.static.50dufei.top/" +  head + "?imageView2/1/w/40/h/40";
		   }
		   
		   
     	   var marker${one.user_id} = new BMap.Marker(new BMap.Point(${one.lng},${one.lat}),{icon:new BMap.Icon(head, new BMap.Size(40,40))});  // 创建标注
       	   map.addOverlay(marker${one.user_id});
       	   var markerMenu${one.user_id} = new BMap.ContextMenu();
	       markerMenu${one.user_id}.addItem(new BMap.MenuItem('查看此人', deteilMarker.bind(marker${one.user_id},${one.user_id})));
	   	   marker${one.user_id}.addContextMenu(markerMenu${one.user_id});
	   </#if>  
   	
   	   </#list>
   	   
   		
   	   /*
   	   for(var i = 0 ; i < markers.length ; i++ ){
   	   	 markers[i].addEventListener('click', click(1));
   	   }
   	   */
   	   var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
}
show_map();



function cancel_fans(){
	$.post("${base}/users_list/cancel_fans",
	   		{"user_id":"${user_id}"},function(data){ 
	   			layer.msg(data);
	   		}
	);
}

</script>
</html>